<template>
  <div class="brand-list table-theme">
    <head-title title="运营--品牌列表"></head-title>
    <el-card>
      <div class="top-menu">
        <div class="menu-left"></div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="optionList"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
          <div class="add">
            <el-button type="primary" @click="onOpenDialog('add')"
              >添加品牌</el-button
            >
          </div>
        </div>
      </div>
      <p class="data-number">总列表数：{{ total }}</p>
      <el-table :data="list" stripe>
        <el-table-column
          label="序号"
          align="center"
          prop="id"
        ></el-table-column>
        <el-table-column
          label="品牌名称"
          align="center"
          prop="factory_name"
        ></el-table-column>
        <el-table-column label="品牌logo" align="center" width="80">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.category_img"></ImgPopover>
          </template>
        </el-table-column>
        <el-table-column
          label="品牌编号"
          align="center"
          prop="factory_sn"
        ></el-table-column>
        <el-table-column
          label="品牌风格编号"
          align="center"
          prop="factory_style_sn"
        ></el-table-column>
        <el-table-column
          label="品牌分类名称"
          align="center"
          prop="class_name"
        ></el-table-column>
        <el-table-column label="排序" align="center">
          <template slot-scope="scope">
            <el-input
              v-model.number="scope.row.sort"
              @pause="scope.row.sort = scope.row.sort.replace(/[^\d]/g, '')"
              @keyup.enter.native="onUpSort(scope.row.sort, scope.row.id)"
              @blur="onUpSort(scope.row.sort, scope.row.id)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          label="时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="onOpenDialog('edit', scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="onOpenDialog('details', scope.row)"
              >详情</el-button
            >
            <el-button size="mini" type="danger" @click="onDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page="page"
          :page-size="limit"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      :title="title"
      :visible.sync="isDialog"
      center
      :modal-append-to-body="false"
      width="500px"
      @close="onClose('brandForm')"
    >
      <el-form
        :model="brandForm"
        :rules="brandFormRules"
        ref="brandForm"
        label-width="120px"
        class="form"
      >
        <el-form-item label="品牌名称:" prop="factory_id">
          <el-select
            v-model="brandForm.factory_id"
            placeholder="请选择品牌"
            v-if="type === 'add'"
            :disabled="type === 'details'"
            multiple
          >
            <el-option
              v-for="(item, index) in factoryList"
              :key="index"
              :label="item.factory_name"
              :value="item.factory_id"
            ></el-option>
          </el-select>
          <el-select
            v-model="brandForm.factory_id"
            placeholder="请选择品牌"
            v-else
            disabled
          >
            <el-option
              v-for="(item, index) in factoryList"
              :key="index"
              :label="item.factory_name"
              :value="item.factory_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称:" prop="class_id">
          <el-select
            v-model="brandForm.class_id"
            placeholder="请选择分类"
            :disabled="type === 'details'"
          >
            <el-option
              v-for="(item, index) in classList"
              :key="index"
              :label="item.class_name"
              :value="item.class_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
          <el-input
            v-model="brandForm.sort"
            placeholder="请输入排序"
            :disabled="type === 'details'"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose('brandForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="onSubimt('brandForm')"
          v-if="type !== 'details'"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
export default {
  components: {
    ImgPopover,
  },
  data() {
    return {
      classSelect: 0,
      selectContent: "",
      store_id: localStorage.getItem("store_id"),
      page: 1,
      limit: 30,
      total: 0,
      list: [],
      optionList: [
        {
          value: 0,
          label: "品牌编号",
        },
        {
          value: 1,
          label: "品牌名称",
        },
      ],
      isDialog: false,
      title: "",
      type: "add",
      classList: [],
      brandForm: {
        class_id: "",
        sort: 0,
        factory_id: [],
      },
      brandFormRules: {
        factory_id: [{ required: true, message: "请选择品牌" }],
        class_id: [{ required: true, message: "请选择分类名称" }],
        sort: [{ required: true, message: "请输入品牌排序" }],
      },
      factoryList: [],
    };
  },
  created() {
    this.init();
    this.initSelect();
  },
  methods: {
    // 清除搜索内容
    refreshPage() {
      this.page = 1;
      this.classSelect = 0;
      this.selectContent = "";
      this.init(1);
    },
    // 获取搜索框
    goSearch(type, value) {
      this.selectContent = value;
      this.classSelect = type;
      this.init();
    },
    initSelect() {
      this.$http(this.$ApiList.SelectFactoryClass, {
        store_id: this.store_id,
      }).then((res) => {
        this.classList = res.datas;
      });
      this.$http(this.$ApiList.SelectFactory).then((res) => {
        this.factoryList = res.datas;
      });
    },
    init(e) {
      this.page = e;
      let data = {
        page: e ? e - 1 : 0,
        limit: this.limit,
        store_id: this.store_id,
      };
      if (this.classSelect == 0) {
        data.factory_sn = this.selectContent;
      } else if (this.classSelect == 1) {
        data.factory_name = this.selectContent;
      }
      this.$http(this.$ApiList.StoreFactoryList, data).then((res) => {
        this.total = res.datas.count;
        this.list = res.datas.data;
      });
    },
    onUpSort(sort, id) {
      if (sort === "" || sort <= -1) {
        return false;
      }
      this.$http(this.$ApiList.UpSortFactory, {
        sort,
        id,
        store_id: this.store_id,
      }).then((res) => {
        this.init(this.page);
      });
    },
    onOpenDialog(type, data) {
      this.type = type;
      switch (type) {
        case "add":
          this.title = "添加品牌";
          break;
        case "edit":
        case "details":
          this.title = type === "edit" ? "编辑品牌" : "品牌详情";
          let obj = {
            class_id: data.class_id,
            factory_id: data.factory_id,
            id: data.id,
            sort: data.sort,
          };
          this.brandForm = obj;
          break;
        default:
          break;
      }
      this.isDialog = true;
    },
    onClose(formName) {
      this.isDialog = false;
      this.$refs[formName].resetFields();
    },
    onSubimt(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.brandForm));
          data.store_id = this.store_id;
          if (this.type === "add") {
            delete data.id;
            data.factory_id = data.factory_id.join(",");
            this.$http(this.$ApiList.StoreFactoryAdd, data).then((res) => {
              this.$message.success(res.datas);
              this.init(this.page);
              this.isDialog = false;
              this.$refs[formName].resetFields();
            });
          } else if (this.type === "edit") {
            this.$http(this.$ApiList.StoreFactoryUpdate, data).then((res) => {
              this.$message.success(res.datas);
              this.init(this.page);
              this.isDialog = false;
              this.$refs[formName].resetFields();
            });
          }
        }
      });
    },
    onDel(data) {
      this.$confirm("此操作将永久删除该品牌, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http(this.$ApiList.StoreFactoryDelete, {
            store_id: data.store_id,
            id: data.id,
          }).then((res) => {
            this.$message.success(res.datas);
            this.init(this.page);
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.brand-list {
  .form {
    /deep/ .el-select {
      width: 100%;
    }
  }
}
</style>